<template>
	<view>
		<u-popup :show="show" round="24rpx" mode="center" :safeAreaInsetBottom="false">
			<view class="contentBox">
				<image class="popup-close" src="../static/common/icon_close.png" @click="$emit('close')" />
				<view class="popup-title">
					<view>VIP充值</view>
					<view class="feature-box">全部{{ featureList.length }}项权益</view>
				</view>
				<view class="swiper-box">
					<swiper :autoplay="true" :interval="3000" :duration="1000" :circular="true" style="height: 300rpx;">
						<swiper-item v-for="(item, index) in featureList" :key="index">
							<view class="swiper-item">
								<image :src="item.image" class="item-image"></image>
								<view class="item-title">{{ item.text }}</view>
								<view class="item-sub">{{ item.intro }}</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<!-- 价格选项 -->
				<view class="price_options">
					<view :class="selectIndex == index ? 'price_item price_item_active' : 'price_item'"
						v-for="(item, index) in priceList" :key="index" @click="selectIndex = index">
						<view class="item-label" v-if="index == 0">最便宜</view>
						<view class="item-label" v-if="index == 1">最畅销</view>
						<view class="item-label" v-if="index == 2">省35%</view>
						<text class="price_duration">{{ item.title }}</text>
						<text class="price_value">¥{{ item.price }}</text>
						<text class="price_original">{{ item.subtext }}</text>
					</view>
				</view>
				<!-- 底部按钮 -->
				<view class="footer">
					<selectPayType :days="days" @success="handlePaySucces"></selectPayType>
				</view>
				<view class="agreement">
					<text class="agreement-text">支付即代表同意</text>
					<text class="agreement-link"
						@click="$Tips('/pages/richText/richText?biaoshi=value_added_services')">《缘定缘分增值服务协议》</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// #ifdef H5
	import wxsdk from '@/utils/wechat/sdk.js'
	// #endif
	import wx from 'weixin-js-sdk';
	import selectPayType from './selectPayType/selectPayType.vue';
	export default {
		name: "UnLockPopup",
		data() {
			return {
				userInfo: null,
				selectIndex: 1,
				priceList: [],
				featureList: [],
				changePayTypeName: '微信支付'
			};
		},
		components:{
			selectPayType
		},
		computed:{
			days(){
				return this.priceList[this.selectIndex]?.days || '0'
			}
		},
		
		props: {
			show: {
				type: Boolean,
				default: false //是否显示
			},
		},
		watch: {
			show(value) {
				if (value == true) {
					this.getUserInfo()
					this.getVipInfo()
				}
			},
		},
		methods: {
			handlePaySucces(){
				this.getVipInfo()
				this.$emit('success')
			},
			changePayType() {
				if (this.changePayTypeName == '微信支付') {
					this.changePayTypeName = '支付宝支付'
				} else {
					this.changePayTypeName = '微信支付'
				}
			},
			submitVipInfo() {
				//  #ifdef H5
				this.$Api['user'].submitVipInfo({
					days: this.priceList[this.selectIndex].days,
					paytype: 'wechat',
					method: 'mp'
				}).then(payres => {
					wxsdk.wxpay(payres.data, (res) => {
						if (res.errMsg == "chooseWXPay:ok") {
							this.$Toast('支付成功');
							this.getVipInfo()
						} else {
							this.$Toast('支付失败');
						}
					});
				})
				// #endif
				//  #ifdef APP
				if (this.changePayTypeName == '支付宝支付') {
					this.$Api['user'].submitVipInfo({
						days: this.priceList[this.selectIndex].days,
						paytype: 'alipay',
						method: 'app'
					}).then(payres => {
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: payres.data, //微信、支付宝订单数据
							success: (res) => {
								this.$Toast('支付成功');
								this.getVipInfo()
							},
							fail: (err) => {
								this.$Toast('支付失败');
							}
						})
					})
				} else if (this.changePayTypeName == '微信支付') {
					this.$Api['user'].submitVipInfo({
						days: this.priceList[this.selectIndex].days,
						paytype: 'wechat',
						method: 'app'
					}).then(payres => {
						let params = JSON.parse(payres.data)
						console.log(params, 'params');
						uni.requestPayment({
							provider: 'wxpay',
							"orderInfo": {
								"appid": params.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
								"noncestr": params.noncestr, // 随机字符串
								"package": params.package, // 固定值
								"partnerid": params.partnerid, // 微信支付商户号
								"prepayid": params.prepayid, // 统一下单订单号
								"timestamp": String(params.timestamp), // 时间戳（单位：秒）
								"sign": params.sign // 签名，这里用的 MD5/RSA 签名
							},
							success: (res) => {
								this.$Toast('支付成功');
								this.getVipInfo();
							},
							fail: (err) => {
								console.error('支付失败详情:', err); // 打印完整错误信息
								this.$Toast('支付失败');
							}
						});
					})
				}
				// #endif
			},
			getVipInfo() {
				this.$Api['user'].getVipInfo().then(res => {
					this.priceList = res.data.vipList.pricedata
					this.featureList = res.data.vipList.rightdata
				})
			},
			getUserInfo() {
				this.$Api['user'].getUserInfo().then(res => {
					this.userInfo = res.data
				}).catch(error => {
					this.$Toast('服务器错误请刷新重试')
					this.$emit('close')
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.contentBox {
		width: 90vw;
		min-height: 440rpx;
		box-sizing: border-box;
		box-shadow: 0rpx 4rpx 32rpx 0rpx #FFF0FD;
		border-radius: 32rpx;
		background: linear-gradient(180deg, #FFDAF5 0%, #FFFFFF 20%);
		position: relative;

		.popup-close {
			position: absolute;
			right: 0;
			top: -120rpx;
			width: 88rpx;
			height: 88rpx;
			z-index: 1000;
		}

		.popup-title {
			padding-top: 38rpx;
			font-weight: 600;
			font-size: 44rpx;
			color: #323334;
			margin-bottom: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.feature-box {
				font-size: 22rpx;
				height: 44rpx;
				line-height: 44rpx;
				color: #FFFFFF;
				padding: 4rpx 20rpx;
				background: #FF4A8C;
				border-radius: 22rpx;
				font-weight: 400;
				margin-left: 20rpx;
			}
		}

		.swiper-box {
			padding-bottom: 30rpx;

			.swiper-item {
				display: flex;
				flex-direction: column;
				text-align: center;

				.item-image {
					width: 172rpx;
					height: 172rpx;
					margin: 0 auto;
				}

				.item-title {
					font-weight: 600;
					font-size: 36rpx;
					color: #606060;
					margin-top: 40rpx;
				}

				.item-sub {
					font-size: 24rpx;
					color: #9A9A9A;
					margin-top: 10rpx;
				}
			}
		}

		.price_options {
			display: flex;
			justify-content: space-between;
			padding: 60rpx 20rpx 40rpx;
			background-color: #f7f7f7;
		}

		.price_item {
			flex: 1;
			margin: 0 10rpx;
			padding-bottom: 26rpx;
			border-radius: 16rpx;
			text-align: center;
			position: relative;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(241, 105, 246, 0.2);

			.item-label {
				height: 36rpx;
				line-height: 36rpx;
				border-radius: 16rpx 16rpx 0 0;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				background: #FEB834;
			}

			&:nth-child(2)::before {
				content: "推荐";
				position: absolute;
				top: -20rpx;
				right: 0;
				background: #FF3E3E;
				border-radius: 13rpx 10rpx 10rpx 0rpx;
				color: #FFFFFF;
				font-size: 18rpx;
				padding: 4rpx 20rpx;
			}
		}

		.price_item_active {
			background: #FFF9E8;
			border: 2rpx solid #FFCB0A;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(241, 105, 246, 0.2);
		}

		.price_tag {
			position: absolute;
			top: -20rpx;
			right: 20rpx;
			background-color: #4CAF50;
			color: #FFFFFF;
			font-size: 24rpx;
			padding: 4rpx 12rpx;
			border-radius: 20rpx;
		}

		.price_tag_hot {
			background-color: #FF69B4;
		}

		.price_value {
			font-size: 48rpx;
			font-weight: bold;
			color: #333333;
			display: block;
			margin-top: 20rpx;
		}

		.price_duration {
			font-size: 28rpx;
			color: #666666;
			margin-top: 24rpx;
			display: block;
		}

		.price_original {
			font-size: 24rpx;
			color: #999999;
			text-decoration: line-through;
			margin-top: 16rpx;
			display: block;
		}

		.footer {
			background-color: #f7f7f7;
			padding: 0 44rpx 30rpx; 

			.button-group {
				.image {
					width: 38rpx;
					height: 32rpx;
					margin-right: 20rpx;
				}

				.title {
					display: block;
					color: #ffffff;
					text-decoration: none;
				}

				.button1 {
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 auto;
					width: 600rpx;
					height: 88rpx;
					font-weight: bold;
					font-size: 30rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 88rpx;
					background: linear-gradient(135deg, #FE93BF 0%, #A27AFF 100%);
					border-radius: 44rpx;
				}
			}

		}

		.agreement {
			background-color: #f7f7f7;
			text-align: center;
			padding-bottom: 30rpx;
			border-radius: 0 0 32rpx 32rpx;

			.agreement-text {
				font-size: 24rpx;
				color: #999999;
			}

			.agreement-link {
				font-size: 24rpx;
				color: #F169F6;
			}
		}
	}
</style>